<template>
  <div style="height: 100%;width: 100%">
    <slot :name="getSlotName('search')" v-if="table.formConfig.show"></slot>
    <vxe-grid v-bind="table"
              class="ol-table" :footer-method="footerMethod" @checkbox-change="selectRowChange"
              @radio-change="selectRowChange"
              v-on="events"
              @checkbox-all="selectRowChange">
      <template v-for='item in table.formConfig.items' v-slot:[item.slotsName]>
        <olSelectDom :item="item" :modelValue.sync="table.formConfig.data[item.key]"></olSelectDom>
      </template>
      <template #img_default="{row,column}">
        <el-image
            style="height: 40px"
            :src="row[getFiledName(column)]"
            :preview-src-list="[row[column[getFiledName(column)]]]"
            :zoom-rate="1.2"
            :max-scale="7"
            :min-scale="0.2"
            :initial-index="4"
            fit="scale-down"
        />
      </template>
      <template #icon_default="{row,column}">
        <i :class="row[getFiledName(column)]"></i>{{ row[column[getFiledName(column)]] }}
      </template>
      <template #header_left>
      <span class="title" v-if="table['table-title']">{{ table['table-title'] }}
      </span>
        <span style="margin: 0px 15px -30px 0px" v-else></span>
        <slot :name="getSlotName('headerLeftLeft')"></slot>
        <ol-table-tool-btn :loading="loading" :value="toolBtn.filter(o=>o.alignMode == 'left')"
                           @toolbarBtnClick="toolbarBtnClick($event)"/>
        <slot :name="getSlotName('headerLeftRight')"></slot>
      </template>
      <template #header_right>
        <slot :name="getSlotName('headerRightLeft')"></slot>
        <ol-table-tool-btn :loading="loading" :value="toolBtn.filter(o=>o.alignMode == 'right')"
                           @toolbarBtnClick="toolbarBtnClick($event)">
          <template #right>
            <vxe-button @click="zoomEvent" circle>
              <i class="vxe-icon-fullscreen" v-if="!isMaximized" title="全屏"/>
              <i class=" vxe-icon-minimize" title="取消全屏" v-else/>
            </vxe-button>
            <vxe-button icon="vxe-icon-refresh" @click="query" title="刷新" circle></vxe-button>
            <vxe-button icon="vxe-icon-setting-fill" title="设置"
                        @click="$refs.olTableColumnConfig.open(tableConfig, tableConfig.uuid,table.columns)"
                        circle></vxe-button>
            <vxe-button icon="vxe-icon-search" title="搜索" @click="toggleFormDisplay" circle></vxe-button>
          </template>
        </ol-table-tool-btn>

        <slot :name="getSlotName('headerRightRight')"></slot>
      </template>
      <!--操作-->
      <template #operate="{ row }">
        <slot :name="getSlotName('operateLeft')"></slot>
        <olTableOperate :row="row" :value="operationBtn"
                        @handleOperationClick="handleOperationClick($event)"></olTableOperate>
        <slot :name="getSlotName('operateRight')"></slot>
      </template>
      <!--分页-->
      <template #pager v-if="pagination.enabled && table.columns.length !=0">
        <olPager v-bind="pagination" @page-change="handlePageChange"
                 @clearSelected="clearSelected">
          <template #left>
            <ol-table-column-dict-color :columns="table.columns"/>
            <slot :name="getSlotName('pageLeft')"></slot>
          </template>
          <template #right>
            <slot :name="getSlotName('pageRight')"></slot>
          </template>
        </olPager>
      </template>
    </vxe-grid>
    <component ref="components" v-if="customUrl != undefined" :is="customUrl" @emits="emits"/>
    <ol-table-column-config ref="olTableColumnConfig" @update="updateColumn" @ok="init(true)"/>
    <olForm ref="form" @query="query"></olForm>
  </div>
</template>

<script>
import {OTMixin} from "@/mixins/VTMixin";
import olTableOperate from "@/components/table/ol-table-operate"
import olPager from "@/components/table/ol-pager"
import olForm from "@/components/table/ol-form"
import OlTableColumnConfig from "@/components/table/ol-table/components/ol-table-column-config/index.vue";
import OlTableToolBtn from "@/components/table/ol-table-tool-btn/index.vue";
import OlTableColumnDictColor from "@/components/table/ol-table/components/ol-table-column-dict-color/index.vue";
import getFiledName from "@/utils/columnProp";

export default {
  name: 'olTable',
  props: {
    theme: {
      type: String
    },
    initDataSource: {
      default: true
    }
  },
  mixins: [OTMixin],
  components: {OlTableColumnDictColor, OlTableToolBtn, OlTableColumnConfig, olTableOperate, olPager, olForm},
  data() {
    return {
      uuid: this.$attrs.uuid
    }
  },
  methods: {
    updateColumn(rows) {
      this.table['show-footer'] = false;
      if (rows && rows instanceof Array) {
        for (let o of this.table.columns) {
          for (let row of rows) {
            if (row.id == o.id) {
              for (let key of Object.keys(row)) {
                o[key] = row[key];
              }
            }
          }
          this.setColumnHide(o);
          this.setFixed(o);
          this.setShowFooter(o);
        }
      }
      let data = this.table.columns.sort((a, b) => {
        return a.sort - b.sort;
      })
      this.doGroupAndCompute()
      this.$table.reloadColumn(data)
    },
    getFiledName,
    olTableColumnConfigOpen() {
      this.$refs.olTableColumnConfig.open(this.tableConfig.id, this.tableConfig.uuid)
    },
    handleClose() {
      this.selectRowChange()
    }, getSlotName(name) {
      return name + "_" + this.theme
    }
  },
  mounted() {
    setTimeout(() => {
      this.updateSort()
    }, 500)
  },
  created() {
  }
}
</script>

<style scoped>
@import "@/components/table/ol-table/theme.scss";
@import '@/components/table/ol-table/index.scss';
</style>
<style lang="less" scoped>

.codemirror-el-dialog {

  > .el-dialog__header {
    display: block;
  }
}

.cursor-pointer {
  cursor: pointer;
}

.table-right-operation-but {
  margin: 0;
}


/deep/ .vxe-table--body-wrapper {
  min-height: 110px;
}

.tableCard {
  height: 100%;

  :deep(.el-card__body) {
    padding: 8px 16px;
    height: 100%;
  }
}

/*
/deep/ .vxe-grid--form-wrapper .vxe-form .vxe-form--wrapper{
  border: 1px solid #e8eaec;
  border-radius: 2px;
  padding: 15px 0;
}
*/

.page-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

.vxe-pager {
  height: 34px;
  top: 3px;
}

.t-bottom {
  float: left;
  position: relative;
  font-size: 13px;
  width: 100%;
  top: 4px;
  border-top: 0;
}

.title {
  z-index: 15;
  margin: 0px 15px -23px 0px;
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid rgb(232, 234, 236);
  border-bottom: 0;
  padding: 0px 9px;
  line-height: 25px;
  color: #49494b;
}

/deep/ .size--mini {
  .title {
    margin: 0px 15px -20px 0px !important;
  }
}

/deep/ .size--medium {
  .title {
    margin: 0px 15px -29px 0px !important;
  }
}
</style>
